<template>
  <div class="shipment">
    <div class="shipment-box" v-for="item in tabLiset" :key="item.id">
      <h2>{{ item.name }}</h2>
      <div>
        <p>品牌：{{ item.type }}</p>
        <p>单位：{{ item.units }}</p>
      </div>
      <img :src="item.img" alt="" />
      <p>￥{{ item.money }}</p>
      <div>
        <span> 库存数量 :{{ item.amount }}</span>
      </div>
    </div>

    <div class="shipment-box shipment-add">
      <!-- 图片上传 -->
      <el-upload
        class="avatar-uploader"
        action="#"
        :show-file-list="false"
        :auto-upload="false"
        :on-change="chooseImageFn"
      >
        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
        <el-icon v-else class="avatar-uploader-icon">
          <Plus />
        </el-icon>
      </el-upload>
      <!-- 按钮 -->
      <el-button plain @click="dialogFormVisible = true">
        添加库存到{{ kuname }}
      </el-button>
      <!-- 弹框 -->
      <el-dialog v-model="dialogFormVisible" title="添加库存" width="500">
        <el-form :model="form">
          <el-form-item label="产品名称" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off" />
          </el-form-item>
          <el-form-item label="产品品牌" :label-width="formLabelWidth">
            <el-input v-model="form.type" autocomplete="off" />
          </el-form-item>
          <el-form-item label="产品单位" :label-width="formLabelWidth">
            <el-input v-model="form.units" autocomplete="off" />
          </el-form-item>
          <el-form-item label="产品金额" :label-width="formLabelWidth">
            <el-input v-model="form.money" autocomplete="off" />
          </el-form-item>
          <el-form-item label="产品数量" :label-width="formLabelWidth">
            <el-input v-model="form.amount" autocomplete="off" />
          </el-form-item>
        </el-form>
        <!-- 底部 -->
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取消</el-button>
            <el-button type="primary" @click="foot"> 上传 </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
  <div class="kong"></div>
</template>

<style lang="less">
.shipment {
  display: flex;
  flex-wrap: wrap;
}

.kong {
  width: 100%;
  height: 60px;
}

.shipment-box {
  cursor: pointer;
  width: 240px;
  height: 400px;
  box-sizing: border-box;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  border-radius: 20px;
  margin-left: 20px;
  margin-bottom: 20px;
  border: 3px solid transparent;

  &:hover {
    border: 3px solid skyblue;
  }

  img {
    width: 200px;
    height: 200px;
  }
}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>

<script setup lang="ts">
import { imggetup, kuList, kuAdd, kuListall01 } from "../../api/index";
import api from "../../api/request";
import {getTimenow} from "../../api/request";
import { ref, reactive, onMounted } from "vue";
import { useRoute } from "vue-router";
import { ElMessage } from "element-plus";


const imageUrl = ref("");
const tabLiset = ref<any>([]);

const dialogFormVisible = ref(false);
const formLabelWidth = "140px";
let $router = useRoute();
const id = ref();
const kuname = ref();

//获取数据
onMounted(() => {
  id.value = $router.query.id;
  kuname.value = $router.query.name;
  if (kuname.value == undefined) {
    kuname.value = "总部仓库";
  }
});
const form = reactive({
  name: "",
  units: "",
  amount: "",
  money: "",
  type: "",
  img: "",
  kid: $router.query.id,
  delivery: false,
});

//重置
const reset = () => {
  form.name = "";
  form.units = "";
  form.amount = "";
  form.money = "";
  form.type = "";
  form.img = "";
  form.kid = $router.query.id;
};
onMounted(() =>{
  getTabList();
  console.log(tabLiset);
  
})
// 添加
const foot = async () => {
  dialogFormVisible.value = false;

  let { name, units, amount, money, type, img, kid } = form;
  // console.log({ name, units, amount, money, type ,img ,kid});
  if (name && units && amount && money && type && img && kid) {
    await kuAdd({ name, units, amount, money, type, img, kid }).then((res) => {
      console.log(res);
      if (res.code == 200) {
        reset();
        getTimenow('添加了一个库存内容')
        ElMessage.success(res.msg);
      } else {
        ElMessage.error(res.msg);
      }
    });
  }
};

// 选择图片
const chooseImageFn = async (file: any) => {
  console.log(file);
  if (file) {
    let fd = new FormData();
    fd.append("photo", file.raw);
    console.log(fd);

    await imggetup(fd).then((res) => {
      if (res.code == 200) {
        form.img = res.picUrl;
        imageUrl.value = api.url + res.picUrl;
      } else {
        ElMessage.error(res.msg);
      }
    });
  }
};

//表格数据
type Item = {
  id: number;
  name: string;
  units: string;
  amount: number;
  type: string;
  money: number;
  img: string;
};
// 获取表格数据
const getTabList = async () => {
  let { kid } = form;
  if (kid == undefined) {
    kid = "1";
  }
  await kuListall01({ kid}).then((res) => {
    if (res.code == 200) {
      let { result } = res;
      let arr = result.map((item: Item) => {
        return {
          id: item.id,
          name: item.name,
          units: item.units,
          money: item.money,
          amount: item.amount,
          type: item.type,
          img: api.url + item.img,
        };
      });

      tabLiset.value = arr;
    } else {
      ElMessage.error(res.msg);
    }
  });
};

</script>
